// 切换用户状态 - 与后端接口对接
const handleToggleStatus = (row) => {
  const action = row.status === 1 ? '禁用' : '启用'
  const newStatus = row.status === 1 ? 0 : 1
  
  ElMessageBox.confirm(
      `确定要${action}该用户吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    try {
      console.log('开始切换用户状态，用户ID:', row.id, '当前状态:', row.status)
      
      // 使用FormData方式传递参数
      const formData = new FormData()
      formData.append('userId', row.id)
      
      // 调用后端toggleUserStatus接口
      const response = await fetch('/admin/toggleUserStatus', {
        method: 'POST',
        body: formData
      })

      console.log('接口响应状态:', response.status)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }

      const result = await response.json()
      console.log('接口返回结果:', result)
      
      if (result.code === 200) {
        ElMessage.success(result.message || `${action}成功`)
        
        // 方式1：刷新整个页面（推荐，确保数据完全同步）
        window.location.reload()
        
        // 方式2：只刷新用户列表（更优雅，但可能数据不同步）
        // handelUser()
        
        // 方式3：延迟刷新页面（给用户看到成功消息后再刷新）
        // setTimeout(() => {
        //   window.location.reload()
        // }, 1000)
        
        // 方式4：保持用户状态的刷新（保存当前页面和筛选条件）
        // const currentPage = queryUser.value.current
        // const currentSize = queryUser.value.size
        // const currentUsername = queryUser.value.username
        // const currentPhone = queryUser.value.phone
        // 
        // // 保存到sessionStorage
        // sessionStorage.setItem('userListPage', currentPage)
        // sessionStorage.setItem('userListSize', currentSize)
        // sessionStorage.setItem('userListUsername', currentUsername || '')
        // sessionStorage.setItem('userListPhone', currentPhone || '')
        // 
        // window.location.reload()
        
      } else {
        ElMessage.error(result.message || `${action}失败`)
      }
    } catch (error) {
      console.error('更新用户状态失败:', error)
      ElMessage.error(`${action}失败，请重试: ${error.message}`)
    }
  }).catch(() => {
    // 用户取消操作
    console.log('用户取消操作')
  })
}

const handelUser = () =>{
  // 恢复用户状态（如果使用了方式4）
  const savedPage = sessionStorage.getItem('userListPage')
  const savedSize = sessionStorage.getItem('userListSize')
  const savedUsername = sessionStorage.getItem('userListUsername')
  const savedPhone = sessionStorage.getItem('userListPhone')
  
  if (savedPage) {
    queryUser.value.current = parseInt(savedPage)
    sessionStorage.removeItem('userListPage')
  }
  if (savedSize) {
    queryUser.value.size = parseInt(savedSize)
    sessionStorage.removeItem('userListSize')
  }
  if (savedUsername) {
    queryUser.value.username = savedUsername
    sessionStorage.removeItem('userListUsername')
  }
  if (savedPhone) {
    queryUser.value.phone = savedPhone
    sessionStorage.removeItem('userListPhone')
  }
  
  adminFindPage(queryUser.value).then(res=>{
    console.log(res.data)
    if (res.data.code == 200){
      userList.value = res.data.data.records.map(user => ({
        ...user,
        status: user.status || 1 // 默认为启用状态
      }))
      queryUser.value.total = res.data.data.total
    }
  })
} 

<el-form-item label="头像" prop="avatar">
  <el-upload
    class="avatar-uploader"
    action="/admin/uploadAvatar"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :on-error="handleAvatarError"
  >
    <img v-if="form.avatar" :src="form.avatar" class="avatar">
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</el-form-item> 